<template>
  <div class="templateContent">
    <div class="header">
      <!-- 左对齐 -->
      <div class="left-item label">{{ title }}</div>
      <!-- 右对齐 -->
      <div v-if="handleType === 'plus'" @click="changeType('add')" class="right-item">
        <i class="el-icon-plus"></i>
      </div>
      <div v-else class="right-item">
        <el-switch
          v-model="localValue"
          @change="changeType"
          active-color="#409eff"
          inactive-color="#ccc"
        >
        </el-switch>
      </div>
    </div>
    <!--  -->
    <div v-if="list&&list.length>0" class="description">
      <div v-for="(item,index) in list" :key="index">
        <div style="display: flex;flex-wrap: wrap;" v-if="item.vars.length>0">
          <div style="width: 76px;margin-right: 10px;">{{ item.name }}:</div>
          <div v-for="(item2,index2) in item.vars" :key="index2">
            <el-tag style="margin-right: 10px;">{{item2.name}}</el-tag>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="description">
      {{ description }}item
    </div>
  </div>
</template>
    
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    handleType: {
      type: String,
      default: "plus",
    },
    type: {
      type: String,
      default: "",
    },
    value: {
      type: Boolean,
      default: false,
    },
    description: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: [],
    },
  },
  name: "TemplateContent",
  data() {
    return {
      localValue: this.value
    };
  },
  // created() {
  //   console.log('create',this.value)
  // },
  methods: {
    changeType(value) {
      console.log("changeType",this.type, value);
      this.$emit("change-type",this.type,value);
    },
  },
};
</script>
    
<style scoped lang="scss">
.templateContent{
    .header{
        display: flex;
        justify-content: space-between;
        align-items: center; // 确保两个元素垂直居中对齐
        .left-item {
            text-align: left;
            font-weight: 700;
            color:#333;
        }
        .right-item {
            text-align: right;
        }
    }
    .description{
        font-size: 12px;
        color:#777;
    }
}
</style>